<!-- <script>
import { userQueryAll, userPageQuery } from '@/api/user';

export default {
  data() {
      return {
        total: 10,
        userList: [],
        searchModel: {
          pageSize: 5,
          pageNo: 1,
          username: '',
          phone: '',
          sex: '',
      },
      options: [{
          value: '1',
          label: '女'
        }, {
          value: '0',
          label: '男'
        },
        {
          value: '',
          label: '未知'
        }],
        dialogTableVisible: false,
        dialogFormVisible: false,
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        formLabelWidth: '120px'
      }
    },
  methods: {
      handleSizeChange(val) {
        this.searchModel.pageSize = val
        this.searchModel.pageNo = 1
        this.userpagequery()
      },
      handleCurrentChange(val) {
        this.searchModel.pageNo = val
        this.userpagequery()
      },
      userqueryall() {
        userQueryAll()
      .then(response => {
        // Assuming the response contains the relevant data
        this.userList = response.data; // Update the table data with the fetched data
        this.total = response.total; // Update total if response contains it
      })
      .catch(error => {
        console.error('Error fetching data:', error);
      });
      },

      userpagequery() {
        userPageQuery(this.searchModel).then(res => {
          this.userList = res.data
          this.total = res.total;
        })
      },

      formatGender(value) {
        return value.sex === 0 ? '男' : '女';
      },
      cleandata() {
        this.searchModel.username='',
        this.searchModel.phone='',
        this.searchModel.sex='',
        this.searchModel.pageNo=1,
        this.userpagequery()
      }

    },
    created() {
      this.userpagequery();
    },
  };
</script> -->

<!-- <template>
  <div>
    <el-input v-model="searchModel.username" placeholder="请输入姓名"></el-input>
    <el-input v-model="searchModel.phone" placeholder="请输入电话"></el-input>
    <el-select v-model="searchModel.sex" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
    <el-button type="primary" @click="userpagequery()">查询</el-button>
    <el-button type="warning" @click="cleandata()">重置</el-button>
    <div class="el-buttonone">
      <el-button type="primary" icon="el-icon-circle-plus-outline" @click="dialogFormVisible = true">新增</el-button>
      <el-button type="danger" icon="el-icon-delete">批量删除</el-button>
    </div>

    <el-main>
      <el-table :data="userList">
        <el-table-column prop="id" label="ID" width="80">
        </el-table-column>
        <el-table-column prop="username" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="phone" label="电话" width="180">
        </el-table-column>
        <el-table-column prop="sex" label="性别" width="180" :formatter="formatGender">
        </el-table-column>
        <el-table-column prop="age" label="年龄" width="180">
        </el-table-column>
        <el-table-column label="操作">
          <el-button type="warning" icon="el-icon-edit">编辑</el-button>
          <el-button type="danger" icon="el-icon-delete">删除</el-button>
        </el-table-column>
      </el-table>
      <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="searchModel.pageNo"
      :page-sizes="[1, 2, 5, 10]"
      :page-size="searchModel.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
    </el-main>
  </div>
</template> -->
<!-- <style scoped>
.el-input {
  width: 200px;
  padding: 10px;
}
.el-select {
  padding: 20px;
}
.el-buttonone{
  padding-left: 10px;
  margin-top: 10px;
}
</style>
<script>
import { userQueryAll, userPageQuery } from '@/api/user';
export default {

  data() {
      return {
        total: 10,
        userList: [],
        searchModel: {
          pageSize: 5,
          pageNo: 1,
          username: '',
          phone: '',
          sex: '',
      },
      options: [{
          value: '1',
          label: '女'
        }, {
          value: '0',
          label: '男'
        },
        {
          value: '',
          label: '未知'
        }],
        dialogTableVisible: false,
        dialogFormVisible: false,
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        formLabelWidth: '120px'
      }
    },
  methods: {
      handleSizeChange(val) {
        this.searchModel.pageSize = val
        this.searchModel.pageNo = 1
        this.userpagequery()
      },
      handleCurrentChange(val) {
        this.searchModel.pageNo = val
        this.userpagequery()
      },
      userqueryall() {
        userQueryAll()
      .then(response => {
        // Assuming the response contains the relevant data
        this.userList = response.data; // Update the table data with the fetched data
        this.total = response.total; // Update total if response contains it
      })
      .catch(error => {
        console.error('Error fetching data:', error);
      });
      },

      userpagequery() {
        userPageQuery(this.searchModel).then(res => {
          this.userList = res.data
          this.total = res.total;
        })
      },

      formatGender(value) {
        return value.sex === 0 ? '男' : '女';
      },
      cleandata() {
        this.searchModel.username='',
        this.searchModel.phone='',
        this.searchModel.sex='',
        this.searchModel.pageNo=1,
        this.searchModel.pageSize=5,
        this.userpagequery()
      },

    },
    created() {
      this.userpagequery();
    },
  };
</script> -->

<template>
  <div>
    <el-input v-model="searchModel.username" placeholder="请输入姓名"></el-input>
    <el-input v-model="searchModel.phone" placeholder="请输入电话"></el-input>
    <el-select v-model="searchModel.sex" placeholder="请选择">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
    <el-button type="primary" @click="userpagequery()">查询</el-button>
    <el-button type="warning" @click="cleandata()">重置</el-button>
    <div class="el-buttonone">
      <el-button type="primary" icon="el-icon-circle-plus-outline" @click="dialogFormVisible = true">新增</el-button>
      <el-button type="danger" icon="el-icon-delete">批量删除</el-button>
    </div>

    <el-main>
      <el-table :data="userList">
        <el-table-column prop="id" label="ID" width="80"></el-table-column>
        <el-table-column prop="username" label="姓名" width="180"></el-table-column>
        <el-table-column prop="phone" label="电话" width="180"></el-table-column>
        <el-table-column prop="sex" label="性别" width="180" :formatter="formatGender"></el-table-column>
        <el-table-column prop="age" label="年龄" width="180"></el-table-column>
        <el-table-column label="操作">
          <el-button type="warning" icon="el-icon-edit">编辑</el-button>
          <el-button type="danger" icon="el-icon-delete">删除</el-button>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="searchModel.pageNo"
          :page-sizes="[1, 2, 5, 10]"
          :page-size="searchModel.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </el-main>

    <UserAddAndUP 
      :visible="dialogFormVisible" 
      :form="form" 
      @close="dialogFormVisible = false" 
      @submit="updateForm" 
    />
  </div>
</template>

<script>
import { userPageQuery } from '@/api/user';
import UserAddAndUP from './UserAddAndUp.vue'; // Adjust path as needed

export default {
  components: {
    UserAddAndUP,
  },
  data() {
    return {
      total: 10,
      userList: [],
      searchModel: {
        pageSize: 5,
        pageNo: 1,
        username: '',
        phone: '',
        sex: '',
      },
      options: [
        { value: '1', label: '女' },
        { value: '0', label: '男' },
        { value: '', label: '未知' },
      ],
      dialogFormVisible: false,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
    };
  },
  methods: {
    handleSizeChange(val) {
      this.searchModel.pageSize = val;
      this.searchModel.pageNo = 1;
      this.userpagequery();
    },
    handleCurrentChange(val) {
      this.searchModel.pageNo = val;
      this.userpagequery();
    },
    userpagequery() {
      userPageQuery(this.searchModel).then(res => {
        this.userList = res.data;
        this.total = res.total;
      });
    },
    formatGender(value) {
      return value.sex === 0 ? '男' : '女';
    },
    cleandata() {
      this.searchModel.username = '';
      this.searchModel.phone = '';
      this.searchModel.sex = '';
      this.searchModel.pageNo = 1;
      this.userpagequery();
    },
    updateForm(updatedForm) {
      this.form = { ...updatedForm }; // Update the main form with the submitted data
      // You can also handle saving/updating the data here
    },
  },
  created() {
    this.userpagequery();
  },
};
</script>

<style scoped>
.el-input {
  width: 200px;
  padding: 10px;
}
.el-select {
  padding: 20px;
}
.el-buttonone {
  padding-left: 10px;
  margin-top: 10px;
}
</style>
